<template>
  <!-- 材料月结-新增 -->
  <div class="e-form">
    <div class="tabs">
      <div class="tabs-title">基本信息</div>
      <div style="width: 100%" class="form">
        <el-form :model="formData" label-width="150px"  :rules="rules"
          ref="formData"
          class="demo-ruleForm">
          <el-row>
            <el-col :span="12">
               <el-form-item label="机构：">
                 {{formData.orgName}}
              </el-form-item>
            </el-col>
            <el-col :span="12">
               <el-form-item label="年度：" prop="year">
                         <el-date-picker
                          v-model="formData.year"
                          v-if="formData.isFirst"
                          type="year"
                          @change="monthChange"
                          placeholder="请选择选择年度">
                        </el-date-picker>
                        <span v-else>{{formData.year}}</span>
                        </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
                 <el-form-item label="月份：" prop="month">
                          <el-select v-model="formData.month" placeholder="请选择月份" v-if="formData.isFirst" @change="monthChange">
                            <el-option
                              v-for="item in monthList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                            </el-option>
                          </el-select>
                          <span v-else>{{formData.month}}</span>
                        </el-form-item>

            </el-col>
            <el-col :span="12">
                 <el-form-item label="月结日期：" prop="monthlySettlementDate">
                <el-date-picker
                  @change="DateChange"
                  v-model="formData.monthlySettlementDate"
                  type="datetime"
                  >
                </el-date-picker>
              </el-form-item>

            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
            <el-form-item label="月结区间：">
              <span>{{formData.startTime +'-'+ formData.endTime}}</span>
            </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="状态：">
              {{ '草稿' }}
            </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="formData.remarks"
              >
              </el-input>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="buttons">
       <span class="tip"
        ><span style="color: red; margin-right: 0">*</span>为必填项</span
      >
      <el-button type="primary" style="background: #2e61d7" @click="save('formData')"
        >保存</el-button
      >
      <el-button @click="cancel()">关闭</el-button>
    </div>
  </div>
</template>

<script>
import '@/utils/jquery.scrollTo.min'
import Api from '@/api/materials/materialClose.js'
import { formatDate } from '@/utils/common.js'
export default {
    data () {
        return {
            //表单数据
            formData: {
                'billId': '',
                'billNo': '',
                'endTime': '',
                'founderId': '',
                'founderName': '',
                'gmtCreate': '',
                'gmtModified': '',
                'isFirst': true,
                'month': null,
                'monthlySettlementDate': '',
                'nullifyCreated': '',
                'nullifyCreator': '',
                'nullifyCreatorId': '',
                'nullifyDescription': '',
                'nullifyReason': '',
                'orgId': '',
                'orgName': '',
                'remarks': '',
                'startTime': '',
                'state': '',
                'workId': '',
                'year': null
            },
            monthList: [{
                value: '1',
                label: '1'
            }, {
                value: '2',
                label: '2'
            }, {
                value: '3',
                label: '3'
            }, {
                value: '4',
                label: '4'
            }, {
                value: '5',
                label: '5'
            }
            , {
                value: '6',
                label: '6'
            }
            , {
                value: '7',
                label: '7'
            }
            , {
                value: '8',
                label: '8'
            }
            , {
                value: '9',
                label: '9'
            }
            , {
                value: '10',
                label: '10'
            }
            , {
                value: '11',
                label: '11'
            }
            , {
                value: '12',
                label: '12'
            }],
            orgId: '', //机构id
            orgName: '', //机构名称
            isSkip: false, //是否跳转
            options: [
                {
                    value: 1,
                    key: '分包合同',
                },
                {
                    value: 2,
                    key: '事实合同',
                },

            ],
            //验证
            rules: {
                monthlySettlementDate: [
                    {  required: true, message: '请选择月结日期', trigger: 'change' }
                ],
                year: [
                    {  required: true, message: '请选择年度', trigger: 'change' }
                ],
                month: [
                    {  required: true, message: '请选择月份', trigger: 'change' }
                ],

            },
            isFirst: true,

        }
    },
    computed: {

    },
    components: {},
    created () {
        try {
            let data = JSON.parse(localStorage.getItem('vuex'))
            this.orgId = data.userInfo.orgInfo.orgId
            this.formData.orgName = data.userInfo.orgInfo.orgName
            this.getInitialValue()

        } catch (error) {
            alert(error.message)
        }
    },
    mounted () {},
    beforeDestroy () {},
    methods: {
        //获取新增月结初始值
        getInitialValue () {
            this.$Ajax
                .httpGet({
                    url: '/material/monthlySettlement/getInitialValue',
                    params: {
                        orgId: this.orgId,
                    },
                }).then(res=>{
                    var date = formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss') //用户选择的日期
                    if(res.isFirst) {
                        this.isFirst = true
                    }else{
                        this.isFirst = false
                        this.formData.isFirst = false
                        this.formData.year = res.year
                        this.formData.month = res.month
                        //月结区间的开始时间就是返回startTime     结束时间   同上
                        this.formData.startTime = res.startTime
                        //获取月结日期
                        const y = date.substring(0, 4)
                        const m = date.substring(5, 7)
                        console.log('月结日期年', y)
                        console.log('月结日期月', m)
                        //先判断选的年度月份是不是小于月结日期年月 ?
                        if(this.formData.year < Number(y) || this.formData.month < Number(m)) {
                            // 如果小于 结束时间就是所选月份的25号23点59分59秒
                            console.log('小于')
                            this.formData.endTime = `${this.formData.year}-${this.formData.month}-25 23:59:59`
                        }else if(this.formData.year == Number(y) && this.formData.month == Number(m)) {
                            console.log('等于')
                            //判断月结日期天数是不是小于25号23点59分59秒 如果小于 以月结日期为结束时间
                            //选择的月结日期的时间戳date < 月结日期25号23点59分59秒的时间戳 ?
                            const  date1 = Date.parse(date)
                            console.log('月结日期的时间戳', date1)
                            const date2 = `${y}-${m}-25 23:59:59`
                            const date3 = Date.parse(date2)
                            console.log('月结日期25号23点59分59秒', date3)
                            if(date1 < date3) {
                                //以月结日期为结束时间
                                console.log('选择的月结日期的时间戳 < 月结日期25号23点59分59秒')
                                this.formData.endTime = `${date}`
                            }else if(date1 > date3) {
                                //如果大于 以年度月份25日23点59分59秒未结束时间
                                this.formData.endTime = `${this.formData.year}-${this.formData.month}-25 23:59:59`
                            }
                        }

                    }
                })
        },
        //用户选年度 月份后
        monthChange () {

            //如果第一月结
            if(this.isFirst) {
                console.log('第一月结', this.isFirst)
                // 判断(选的年度月份不能大于当前时间)
                let date = formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss') //当前时间
                const y = date.substring(0, 4)
                const m = date.substring(5, 7)
                const year = formatDate(this.formData.year, 'yyyy')

                if(Number(this.formData.month) > Number(m) || Number(year) > Number(y)) {
                    this.clientPop('info', '选的年度月份不能大于当前时间！')
                }
                if(year === '' || this.formData.month === null) {
                    console.log('不计算')
                }else{
                    console.log('计算')
                    //计算月结区间
                    //1.选年度和月份后  月结区间开始时间就是 空
                    //2.结束时间  先判断选的年度月份是不是小于月结日期年月 ?  如果小于 结束时间就是所选月份的25号23点59分59秒
                    if(Number(year) < Number(y) || Number(this.formData.month) < Number(m)) {
                        console.log('小于')
                        this.formData.startTime = '/'
                        this.formData.endTime = `${year}-${this.formData.month}-25 23:59:59`
                    }else if(Number(year) == Number(y) && Number(this.formData.month) == Number(m)) {
                        console.log('等于')
                        //判断月结日期天数是不是小于25号23点59分59秒 如果小于 以月结日期为结束时间
                        //选择的月结日期的时间戳date < 月结日期25号23点59分59秒的时间戳 ?
                        const  date1 = Date.parse(date)
                        console.log('选择的月结日期的时间戳', date1)
                        const date2 = `${y}-${m}-25 23:59:59`
                        const date3 = Date.parse(date2)
                        console.log('月结日期25号23点59分59秒', date3)
                        if(date1 < date3) {
                        //以月结日期为结束时间
                            console.log('选择的月结日期的时间戳 < 月结日期25号23点59分59秒')
                            this.formData.startTime = '/'
                            this.formData.endTime = `${date}`
                        }
                    }
                    /*
                     如果选择的年度月份等于月结日期年月 ?  判断月结日期天数是不是小于25号23点59分59秒,如果小于
                      以月结日期为结束时间  如果大于 以年度月份25日23点59分59秒未结束时间
                    */

                }

            }else{
                //不是第一次月结
                console.log('不是第一次月结')
            }
        },
        //用户选择月结日期后
        DateChange () {
            //如果第一月结
            if(this.isFirst) {
                // 判断(选择的年度和月份不能大于月结日期)
                //1.获取月结日期
                const date = formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss') //月结日期
                const year = date.substring(0, 4)
                const month = date.substring(5, 7)
                // console.log('year', year)
                // console.log('month', month)
                //获取年度 月份
                const y = formatDate(this.formData.year, 'yyyy')
                const m = this.formData.month
                if(Number(y) > Number(year) || Number(m) > Number(month)) {
                    this.clientPop('info', '选择的年度和月份不能大于月结日期！')
                }
                //计算月结区间
                //1.选年度和月份后  月结区间开始时间就是 空
                //2.结束时间  先判断选的年度月份是不是小于月结日期年月 ?  如果小于 结束时间就是所选月份的25号23点59分59秒
                if(Number(y) < Number(year) || Number(m) < Number(month)) {
                    console.log('小于')
                    this.formData.startTime = '/'
                    this.formData.endTime = `${y}-${m}-25 23:59:59`
                }else if(Number(y) == Number(year) && Number(m) == Number(month)) {
                    console.log('等于')
                    //判断月结日期天数是不是小于25号23点59分59秒 如果小于 以月结日期为结束时间
                    //选择的月结日期的时间戳date < 月结日期25号23点59分59秒的时间戳 ?
                    const  date1 = Date.parse(date)
                    console.log('选择的月结日期的时间戳', date1)
                    const date2 = `${year}-${month}-25 23:59:59`
                    const date3 = Date.parse(date2)
                    console.log('月结日期25号23点59分59秒', date3)
                    if(date1 < date3) {
                        //以月结日期为结束时间
                        console.log('选择的月结日期的时间戳 < 月结日期25号23点59分59秒')
                        this.formData.startTime = '/'
                        this.formData.endTime = ` ${date}`
                    }else if(date1 > date3) {
                        //如果大于 以年度月份25日23点59分59秒未结束时间
                        this.formData.startTime = '/'
                        this.formData.endTime = `${y}-${m}-25 23:59:59`
                    }
                }

            }else{
                //不是第一次月结
                console.log('不是第一次月结')
                //月结日期可以选择,但是不能小于返回的年月 可以等于
                //1.获取月结日期
                const date = formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss') //月结日期
                const year = date.substring(0, 4)
                const month = date.substring(5, 7)
                const y = this.formData.year
                const m = this.formData.month
                console.log('月结日期的年', year)
                console.log('月结日期的月', month)
                console.log('返回的年', y)
                console.log('返回的月', m)
                if(Number(year) < y || Number(month) < m) {
                    this.clientPop('info', '选择的月结日期不能小于年度和月份！')
                }
                //获取月结日期

                //先判断选的年度月份是不是小于月结日期年月 ?
                if(this.formData.year < Number(y) || this.formData.month < Number(m)) {
                    // 如果小于 结束时间就是所选月份的25号23点59分59秒
                    console.log('小于')
                    this.formData.endTime = `${this.formData.year}-${this.formData.month}-25 23:59:59`
                }else if(this.formData.year == Number(y) && this.formData.month == Number(m)) {
                    console.log('等于')
                    //判断月结日期天数是不是小于25号23点59分59秒 如果小于 以月结日期为结束时间
                    //选择的月结日期的时间戳date < 月结日期25号23点59分59秒的时间戳 ?
                    const  date1 = Date.parse(date)
                    console.log('月结日期的时间戳', date1)
                    const date2 = `${y}-${m}-25 23:59:59`
                    const date3 = Date.parse(date2)
                    console.log('月结日期25号23点59分59秒', date3)
                    if(date1 < date3) {
                        //以月结日期为结束时间
                        console.log('选择的月结日期的时间戳 < 月结日期25号23点59分59秒')
                        this.formData.endTime = `${date}`
                    }else if(date1 > date3) {
                        //如果大于 以年度月份25日23点59分59秒未结束时间
                        this.formData.endTime = `${this.formData.year}-${this.formData.month}-25 23:59:59`
                    }
                }

            }
        },

        //保存
        save (formName) {

            this.$refs[formName].validate(valid => {
                if (valid) {
                    if(this.formData.monthlySettlementDate === '') {
                        this.formData.monthlySettlementDate = this.geyDate()
                    }
                    if(this.formData.startTime == '/') {
                        this.formData.startTime = ''
                    }
                    this.formData.monthlySettlementDate =   formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss')
                    if(this.isFirst) {
                        this.formData.year =  Number(formatDate(this.formData.year, 'yyyy'))
                        this.formData.month = Number(this.formData.month)
                    }
                    const date = formatDate(this.formData.monthlySettlementDate, 'yyyy-MM-dd hh:mm:ss') //月结日期
                    const year = date.substring(0, 4)
                    const month = date.substring(5, 7)
                    const y = this.formData.year
                    const m = this.formData.month
                    console.log('月结日期的年', year)
                    console.log('月结日期的月', month)
                    console.log('返回的年', y)
                    console.log('返回的月', m)
                    if(Number(year) < y || Number(month) < m) {
                        this.clientPop('info', '选择的月结日期不能小于年度和月份！')
                    }else{
                        Api.AddMaterialClose(this.formData).then(res => {
                            this.clientPop('suc', '保存成功,是否继续', ()=>{
                                this.$router.replace({
                                    path: '/materialCloseEdit',
                                    query: {
                                        billid: res,
                                        name: 'receivingMaterials'
                                    }
                                })
                            }, this.cancel)
                        })
                    }

                } else {
                    return false
                }
            })

        },

        //取消按钮
        cancel () {
            this.$router.replace('/materialClose')
        },

    },
}
</script>

<style lang="scss" scoped>
.buttons {
  left: 0;
}
.e-form {
  margin-bottom: 80px;
  padding: 0 20px;
  .tabs-title::before {
    content: "";
    height: 22px;
    width: 8px;
    border-radius: 40px;
    background-color: #2e61d7;
    display: block;
    position: absolute;
    left: 20px;
    margin-right: 20px;
  }
}

.e-table {
  background: #fff;
}

.el-tab-pane {
  margin-left: -10px;
}
</style>
